<template>
  <div class="topThree">
    <div ref="app" class="echarts"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "topThree",
  // props: {
  //   onState: {
  //     type: Number,
  //   },
  //   ngState: {
  //     type: Number,
  //   },
  //   offState: {
  //     type: Number,
  //   },
  //   noState: {
  //     type: Number,
  //   },
  // },
  data() {
    return {
      screenWidth: document.body.clientWidth,
      screenHeight: document.body.clientHeight,
      myChart: "",
    };
  },
  methods: {
    getdata() {
      let that = this;
      var myChart = echarts.init(this.$refs.app);
      this.myChart = myChart;
      var option;
      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          right: "5%",
          bottom: "26%",
          textStyle: {
            // 图例的文本样式
            color: "#AFC1FF", // 图例的字体颜色
            fontSize: "14",
          },
        },

        series: [
          {
            name: "",
            type: "pie",
            radius: "65%",
            // minAngle: 15,
            avoidLabelOverlap: true, //是否启用防止标签重叠策略
            hoverAnimation: true, //是否开启 hover 在扇区上的放大动画效果。
            silent: true, //图形是否不响应和触发鼠标事件
            center: ["35%", "45%"],
            data: [
              {
                // value: this.onState,
                value: 47,
                name: "运行",
                itemStyle: { color: "#92F92A" },
              },
              {
                // value: this.offState,
                value: 2,
                name: "待机",
                itemStyle: { color: "#FDFD2F" },
              },
              {
                // value: this.ngState,
                value: 0,
                name: "故障",
                itemStyle: { color: "#FB2314" },
              },
              {
                // value: this.noState,
                value: 0,
                name: "关机",
                itemStyle: { color: "#87898D" },
              },
            ],
            label: {
              normal: {
                show: false,
                position: "outside",
                formatter: "{c}h",
                // minMargin: 5,
                textStyle: {
                  color: "#96A6FF",
                },
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 10, // 调整标签线长度
                smooth: 0.2, // 使标签线更平滑地接触饼图边缘
              },
            },
          },
        ],
      };

      window.addEventListener("resize", () => {
        //使用resize监听方法
        that.screenWidth = document.body.clientWidth;
        window.screenWidth = that.screenWidth;
        that.screenHeight = document.body.clientHeight;
        window.screenHeight = that.screenHeight;
      });
      option && myChart.setOption(option);
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.getdata();
    });
  },
  watch: {
    screenWidth() {
      this.myChart.resize();
    },
    screenHeight() {
      this.myChart.resize();
    },
    onState() {
      this.getdata();
    },
  },
};
</script>
<style scoped>
.echarts {
  width: 100%;
  height: 18vh;
}
</style>
